.progressHUD .progressHUD-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 8;
}

.progressHUD .progressHUD-area-with-icon {
    position: absolute;
    min-width: 100px;
    min-height: 100px;
    left: 50%;
    margin-left: -50px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 8px;
    z-index: 8;
}

.progressHUD .progressHUD-area-without-icon {
    position: absolute;
    min-width: 120px;
    min-height: 30px;
    left: 50%;
    margin-left: -50px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 8px;
    z-index: 8;
}

.progressHUD .progressHUD-text {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7px;
    font-size: 14px;
}

.icon-spinner:before {
    content: url(loading.png);
}

.icon-spin {
    display: inline-block;
    margin-left: 27px;
    margin-top: 15px;
    -webkit-animation: progressHUD-spin 2s infinite linear;
    -o-animation: progressHUD-spin 2s infinite linear;
    animation: progressHUD-spin 2s infinite linear;
}

@-webkit-keyframes progressHUD-spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg)
    }
}

@-o-keyframes progressHUD-spin {
    0% {
        -o-transform: rotate(0deg)
    }

    100% {
        -o-transform: rotate(359deg)
    }
}

@-ms-keyframes progressHUD-spin {
    0% {
        -ms-transform: rotate(0deg)
    }

    100% {
        -ms-transform: rotate(359deg)
    }
}

@keyframes progressHUD-spin {
    0% {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}
